<template>
  <div class="ai-chat">
    <!-- 将登录功能移到右上角固定位置 -->
    <div class="top-right-auth">
      <button v-if="!isLoggedIn" class="single-login-btn" @click="goToLogin">
        登录
      </button>
      <div v-else class="user-dropdown" @click="toggleUserDropdown">
        <img src="/用户登录.svg" alt="用户头像" class="user-avatar" />
        <div v-if="showUserDropdown" class="dropdown-menu">
          <div class="dropdown-item logout-item" @click.stop="logout">
            <img src="/退出登录.svg" alt="退出登录" class="logout-icon" />
            <span>退出登录</span>
          </div>
        </div>
      </div>
    </div>
    <div class="chat-container" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
      <!-- 展开侧栏按钮 - 只在侧栏收起时显示 -->
      <div v-if="sidebarCollapsed" class="expand-sidebar-btn" @click="toggleSidebar">q
        <img src="/收起侧栏.svg" alt="展开侧栏" title="展开侧栏" class="expand-icon">
        <div class="tooltip">展开侧栏</div>
      </div>

      <div class="sidebar" :class="{ 'collapsed': sidebarCollapsed }">
        
        <div class="function-buttons">
          <!-- 添加MatCreate AI标题 -->
          <div class="app-logo">
            <div class="logo-row">
              <span v-if="!sidebarCollapsed" class="logo-text">MatCreate AI</span>
              <span v-else class="logo-icon"></span>
              <!-- 收起侧栏按钮 - 只在侧栏展开时显示 -->
              <div v-if="!sidebarCollapsed" class="collapse-sidebar-container" @click="toggleSidebar">
                <img src="/收起侧栏.svg" alt="收起侧栏" class="collapse-sidebar-btn"/>
             
                <div class="tooltip">收起侧栏</div>
              </div>
            </div>
            <!-- </span> -->

            <!-- 新对话按钮 -->
            <button class="new-chat-button" @click="startNewChat">
              <img src="/加新对话.svg" alt="新对话" class="icon" />
              <span v-if="!sidebarCollapsed">新对话</span>
            </button>
          </div>
          
          <button class="function-btn"
            :class="{ 'active': currentFunction === '智能计算' }"
            @click="switchFunction('智能计算')">
            <img src="/智能计算.png" alt="新对话" class="icon" />
            <span v-if="!sidebarCollapsed">智能计算</span>
          </button>
          <button class="function-btn"
            :class="{ 'active': currentFunction === '智能设计' }"
            @click="switchFunction('智能设计')">
            <img src="/智能设计.png" alt="新对话" class="icon" />
            <span v-if="!sidebarCollapsed">智能设计</span>
          </button>
          <button class="function-btn"
            :class="{ 'active': currentFunction === '智能合成' }"
            @click="switchFunction('智能合成')">
            <img src="/智能合成.png" alt="新对话" class="icon" />
            <span v-if="!sidebarCollapsed">智能合成</span>
          </button>
          
          <!-- 更多分类标题 - 可点击，根据状态切换图标和文字 -->
          <div class="menu-category" @click="toggleSubMenu">
            <div class="category-title">
              <img :src="showSubMenu ? '/更多-触发后.svg' : '/更多.svg'" alt="更多" class="icon" />
              <span v-if="!sidebarCollapsed">{{ showSubMenu ? '收起' : '更多' }}</span>
            </div>
          </div>
          
          <!-- 子菜单项 - 条件显示 -->
          <div v-if="showSubMenu" class="sub-menu">
            <button class="function-btn sub-menu-item" 
              :class="{ 'active': currentFunction === '工艺推荐' }"
              @click="switchFunction('工艺推荐')">
              <img src="/工艺推荐.png" alt="工艺推荐" class="icon" />
              <span v-if="!sidebarCollapsed">工艺推荐</span>
            </button>
            <button class="function-btn sub-menu-item" 
              :class="{ 'active': currentFunction === '结构设计' }"
              @click="switchFunction('结构设计')">
              <img src="/结构设计.png" alt="结构设计" class="icon" />
              <span v-if="!sidebarCollapsed">结构设计</span>
            </button>
            <button class="function-btn sub-menu-item" 
              :class="{ 'active': currentFunction === '材料智能体' }"
              @click="switchFunction('材料智能体')">
              <img src="/材料智能体.png" alt="材料智能体" class="icon" />
              <span v-if="!sidebarCollapsed">材料智能体</span>
            </button>
          </div>
        </div>
        
        <div class="history-header">
          <h2 v-if="!sidebarCollapsed">历史会话</h2>
         
          <span v-else class="history-icon">💬</span>
        </div>
        <div class="history-list">
          <div v-if="chatHistory.length === 0" class="no-history-message">
            <span v-if="!sidebarCollapsed">暂无历史记录</span>
          </div>
          <div 
            v-for="chat in chatHistory" 
            :key="chat.id"
            class="history-item"
            :class="{ 'active': currentChatId === chat.id }"
            @click="loadChat(chat.id)"
          >
            <img :src="chat.image" alt="历史会话" class="icon" />
            <span v-if="!sidebarCollapsed" class="title">{{ chat.title || '新对话' }}</span>
          </div>
        </div>
      </div>
      
      <div class="chat-main" :class="{ 'split-view': currentFunction === '智能合成' && hasUserSentMessage }">
        <!-- 聊天区域 -->
        <div class="chat-content" :class="{ 'empty-chat': isEmpty }">
          <div class="messages" ref="messagesRef">
            <ChatMessage
              v-for="(message, index) in currentMessages"
              :key="index"
              :message="message"
              :is-stream="isStreaming && index === currentMessages.length - 1"
              @delete="deleteMessage"
            />
          </div>
          
          <div class="input-area">
            <!-- 专业功能模式下显示对应标题 -->
            <div v-if="isEmpty && isSpecialFunction(currentFunction)" class="function-title-container">
              <h1 class="function-title">{{ currentFunction }}</h1>
            </div>

            <!-- 非专业功能模式下显示问候语区域 -->
            <div v-if="isEmpty && !isSpecialFunction(currentFunction)" class="greeting-container">
              <div class="greeting-content">
                <div class="normal-greeting">
                  <div class="greeting-text-container">
                    <div class="greeting-line">
                      <img src="/logo.svg" alt="MatCreate AI" class="greeting-logo" />
                      我是MatCreate AI，很高兴见到你！
                    </div>
                    <div class="greeting-line">我可以帮你设计材料、合成材料、解答问题，请把你的任务交给我吧</div>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="selectedFiles.length > 0" class="selected-files">
              <div v-for="(file, index) in selectedFiles" :key="index" class="file-item">
                <div class="file-info">
                  <DocumentIcon class="icon" />
                  <span class="file-name">{{ file.name }}</span>
                  <span class="file-size">({{ formatFileSize(file.size) }})</span>
                </div>
                <button class="remove-btn" @click="removeFile(index)">
                  <XMarkIcon class="icon" />
                </button>
              </div>
            </div>

            <div class="input-row">
        
              
              <textarea
                v-model="userInput"
                @keydown.enter.prevent="sendMessage"
                :placeholder="getPlaceholder()"
                rows="1"
                ref="inputRef"
              ></textarea>
              
              <!-- 将文件上传按钮移到输入框后面，样式上会放在左下角 -->
              <div class="file-upload">
                <input
                  type="file"
                  ref="fileInput"
                  @change="handleFileUpload"
                  accept=".poscar,.POSCAR,POSCAR,CONTCAR,.contcar,.vasp,.cif,.xyz,text/plain,*"
                  multiple
                  class="hidden"
                >
                <button
                  class="upload-btn"
                  @click="triggerFileInput"
                  :disabled="isStreaming"
                >
                  <img src="/添加文件.svg" alt="添加文件" class="upload-icon" />
                </button>
              </div>

              <!-- 添加深度思考按钮 -->
              <button
                class="deep-thinking-btn"
                :class="{ active: deepThinking }"
                @click="toggleDeepThinking"
                :title="deepThinking ? '关闭深度思考' : '开启深度思考'"
              >
                <img
                  :src="deepThinking ? '/深度思考-打开.svg' : '/深度思考-关闭.svg'"
                  alt="深度思考"
                  class="deep-thinking-icon"
                />
                <span class="deep-thinking-text">深度思考</span>
              </button>

              <!-- 智能计算专用下拉菜单 - 只在智能计算模式下显示 -->
              <div v-if="currentFunction === '智能计算'" class="calculation-dropdown-container">
                <button
                  class="calculation-dropdown-btn"
                  @click="toggleCalculationDropdown"
                  :title="selectedCalculationOption || '选择计算选项'"
                >
                  <span class="dropdown-text">{{ selectedCalculationOption || '计算选项' }}</span>
                  <svg class="dropdown-arrow" :class="{ 'rotated': showCalculationDropdown }" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <polyline points="6,9 12,15 18,9"></polyline>
                  </svg>
                </button>
                <div v-if="showCalculationDropdown" class="calculation-dropdown-menu">
                  <div
                    v-for="option in calculationOptions"
                    :key="option"
                    class="calculation-dropdown-item"
                    @click="selectCalculationOption(option)"
                  >
                    {{ option }}
                  </div>
                </div>
              </div>
              
              <!-- 停止生成按钮 - 只在生成时显示 -->
              <button
                v-if="isGenerating"
                class="stop-button"
                @click="stopGeneration"
                title="停止生成"
              >
                <img src="/停止生成.svg" alt="停止生成" class="stop-icon" />
              </button>

              <!-- 发送按钮 - 在非生成时显示 -->
              <button
                v-if="!isGenerating"
                class="send-button"
                :class="{ 'has-content': hasInputContent }"
                @click="sendMessage"
                :disabled="isStreaming || (!userInput.trim() && !selectedFiles.length)"
              >
                <img
                  :src="hasInputContent ? '/发送消息-触发.svg' : '/发送消息-未触发.svg'"
                  alt="发送"
                  class="send-icon"
                />
              </button>
            </div>

            <!-- 专业功能模式下不显示功能按钮 -->
            <div v-if="isEmpty && !isSpecialFunction(currentFunction)" class="function-quick-buttons">
              <button
                v-for="func in quickFunctions"
                :key="func.name"
                class="quick-func-btn"
                @click="switchFunction(func.name)"
              >
                <img :src="func.icon" :alt="func.name" class="icon" />
                <span>{{ func.name }}</span>
              </button>
            </div>
          </div>
        </div>

        <!-- 摄像头区域 - 右侧显示，只在智能合成模式下且用户发送消息后显示 -->
        <div v-if="currentFunction === '智能合成' && hasUserSentMessage" class="video-area">
          <HlsVideoPlayer @cancel="handleVideoCancel" />
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, onBeforeUnmount, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import {
  ChatBubbleLeftRightIcon,
  PaperAirplaneIcon,
  PlusIcon,
  DocumentIcon,
  XMarkIcon,
  UserIcon,
  CalculatorIcon,
  PencilSquareIcon,
  BeakerIcon,
  BuildingOfficeIcon,
  CubeIcon,
  SparklesIcon,
  Squares2X2Icon,
  DocumentTextIcon,
  PhoneIcon,
  ChevronLeftIcon,
  ChevronRightIcon
} from '@heroicons/vue/24/outline'
import ChatMessage from '../components/ChatMessage.vue'
import HlsVideoPlayer from './HlsVideoPlayer.vue' // 导入视频播放器组件

import { chatAPI } from '../services/api'
import { getAllHistory, saveMessage } from '../services/api'

const messagesRef = ref(null)
const inputRef = ref(null)
const userInput = ref('')
const isStreaming = ref(false)
const currentChatId = ref(null)
const currentMessages = ref([])
const chatHistory = ref([])
const fileInput = ref(null)
const selectedFiles = ref([])
const router = useRouter()
const allHistoryMap = ref({})
const userId = ref(localStorage.getItem('loginId'))
const currentFunction = ref('') // 当前选中的功能
const sidebarCollapsed = ref(false)
// 添加深度思考状态
const deepThinking = ref(false)
// 跟踪用户是否已经发送过消息（用于智能合成摄像头显示）
const hasUserSentMessage = ref(false)

// 添加子菜单显示状态
const showSubMenu = ref(false)
// 添加停止生成状态
const isGenerating = ref(false)

// 添加登录相关状态
const isLoggedIn = ref(false)
const username = ref('')
// 添加用户下拉菜单状态
const showUserDropdown = ref(false)


// 检查登录状态
const checkLoginStatus = () => {
  const token = localStorage.getItem('token')
  const savedUsername = localStorage.getItem('username')

  console.log('检查登录状态:')
  console.log('token:', token)
  console.log('savedUsername:', savedUsername)

  if (token && savedUsername) {
    isLoggedIn.value = true
    username.value = savedUsername
    console.log('设置为已登录状态')
  } else {
    isLoggedIn.value = false
    username.value = ''
    console.log('设置为未登录状态')
  }
}

const quickFunctions = [
  { name: '智能计算', icon: '/智能计算.png' },
  { name: '智能设计', icon: '/智能设计.png' },
  { name: '智能合成', icon: '/智能合成.png' },
  { name: '工艺推荐', icon: '/工艺推荐.png' },
  { name: '结构设计', icon: '/结构设计.png' },
  { name: '材料智能体', icon: '/材料智能体.png' }
]
// 切换深度思考状态
const toggleDeepThinking = () => {
  deepThinking.value = !deepThinking.value
  // 可以在这里添加深度思考模式的相关逻辑
  console.log('深度思考模式:', deepThinking.value ? '开启' : '关闭')
}

// 智能计算专用下拉菜单状态
const showCalculationDropdown = ref(false)
const selectedCalculationOption = ref('')

// 计算选项列表
const calculationOptions = [
  '态密度',
  '能带',
  'relax'
]

// 切换计算下拉菜单
const toggleCalculationDropdown = () => {
  showCalculationDropdown.value = !showCalculationDropdown.value
}

// 选择计算选项
const selectCalculationOption = (option) => {
  selectedCalculationOption.value = option
  showCalculationDropdown.value = false
  console.log('选择的计算选项:', option)
}

// 添加计算属性检查当前消息是否为空
const isEmpty = computed(() => {
  return currentMessages.value.length === 0
})

// 添加计算属性检查是否有输入内容
const hasInputContent = computed(() => {
  return userInput.value.trim().length > 0 || selectedFiles.value.length > 0
})

// 判断是否为专业功能模式（需要特殊处理的功能）
const isSpecialFunction = (functionType) => {
  const specialFunctions = ['智能计算', '智能设计', '智能合成', '工艺推荐', '结构设计', '材料智能体']
  return specialFunctions.includes(functionType)
}

// 切换子菜单显示
const toggleSubMenu = () => {
  showSubMenu.value = !showSubMenu.value
}

// 停止生成方法
const stopGeneration = () => {
  isStreaming.value = false
  isGenerating.value = false
  console.log('停止生成')
}

// 处理视频取消事件
const handleVideoCancel = () => {
  // 隐藏摄像头画面
  hasUserSentMessage.value = false
  console.log('摄像头画面已取消')
}



// 切换功能方法
const switchFunction = (functionType) => {

 
  startNewChat(functionType) // 开始一个新对话，传递功能类型
  currentFunction.value = functionType // 在新对话创建后设置功能类型

  // 专业功能模式不显示初始AI回复，让用户直接输入问题
  if (isSpecialFunction(functionType)) {
    // 专业功能模式：不添加任何初始消息，保持界面简洁
    return
  }

  // 非专业功能的默认提示语
  const initialPrompt = '您好！今天可以为您做什么？'

  // 添加系统消息
  if (initialPrompt) {
    currentMessages.value.push({
      role: 'assistant',
      content: initialPrompt
    })
  }

  // 如果切换到智能合成模式，需要滚动到底部确保用户看到提示
  if (functionType === '智能合成') {
    nextTick(() => {
      scrollToBottom()
    })
  }
}

// 自动调整输入框高度
const adjustTextareaHeight = () => {
  const textarea = inputRef.value
  if (textarea) {
    textarea.style.height = 'auto'
    textarea.style.height = textarea.scrollHeight + 'px'
  }else{
    textarea.style.height = '50px'
  }
}

// 滚动到底部
const scrollToBottom = async () => {
  await nextTick()
  if (messagesRef.value) {
    // 确保获取正确的滚动高度
    const scrollHeight = messagesRef.value.scrollHeight
    messagesRef.value.scrollTop = scrollHeight
    
    // 添加延迟再次滚动，确保在内容渲染后滚动
    setTimeout(() => {
      if (messagesRef.value) {
        messagesRef.value.scrollTop = messagesRef.value.scrollHeight
      }
    }, 100)
  }
}

// 文件类型限制
const FILE_LIMITS = {
  image: {
    maxSize: 10 * 1024 * 1024,  // 单个文件 10MB
    maxFiles: 3,                 // 最多 3 个文件
    description: '图片文件'
  },
  audio: {
    maxSize: 10 * 1024 * 1024,  // 单个文件 10MB
    maxDuration: 180,           // 3分钟
    maxFiles: 3,                // 最多 3 个文件
    description: '音频文件'
  },
  video: {
    maxSize: 150 * 1024 * 1024, // 单个文件 150MB
    maxDuration: 40,            // 40秒
    maxFiles: 3,                // 最多 3 个文件
    description: '视频文件'
  },
  poscar: {
    maxSize: 5 * 1024 * 1024,   // 单个文件 5MB
    maxFiles: 5,                // 最多 5 个文件
    description: 'POSCAR文件'
  }
}

// 触发文件选择
const triggerFileInput = () => {
  console.log('triggerFileInput called')
  console.log('fileInput.value:', fileInput.value)
  if (fileInput.value) {
    console.log('Clicking file input')
    fileInput.value.click()
  } else {
    console.error('fileInput.value is null or undefined')
  }
}

// 检查文件是否符合要求
const validateFile = async (file) => {
  // 使用统一的文件类型识别函数
  const type = getFileType(file)

  const limit = FILE_LIMITS[type]

  if (!limit) {
    return { valid: false, error: `不支持的文件类型: ${file.name}` }
  }

  if (file.size > limit.maxSize) {
    return { valid: false, error: `文件大小不能超过${limit.maxSize / 1024 / 1024}MB` }
  }

  if ((type === 'audio' || type === 'video') && limit.maxDuration) {
    try {
      const duration = await getMediaDuration(file)
      if (duration > limit.maxDuration) {
        return {
          valid: false,
          error: `${type === 'audio' ? '音频' : '视频'}时长不能超过${limit.maxDuration}秒`
        }
      }
    } catch (error) {
      return { valid: false, error: '无法读取媒体文件时长' }
    }
  }

  return { valid: true, type }
}

// 获取媒体文件时长
const getMediaDuration = (file) => {
  return new Promise((resolve, reject) => {
    const element = file.type.startsWith('audio/') ? new Audio() : document.createElement('video')
    element.preload = 'metadata'
    
    element.onloadedmetadata = () => {
      resolve(element.duration)
      URL.revokeObjectURL(element.src)
    }
    
    element.onerror = () => {
      reject(new Error('无法读取媒体文件'))
      URL.revokeObjectURL(element.src)
    }
    
    element.src = URL.createObjectURL(file)
  })
}

// 定义POSCAR文件的识别规则
const isPoscarFile = (fileName) => {
  const name = fileName.toLowerCase()
  return (
    name === 'poscar' ||
    name === 'contcar' ||
    name.endsWith('.poscar') ||
    name.endsWith('.contcar') ||
    name.endsWith('.vasp') ||
    name.endsWith('.cif') ||
    name.endsWith('.xyz') ||
    name.includes('poscar') ||
    name.includes('contcar') ||
    name.includes('vasp')
  )
}

// 获取文件类型（支持POSCAR文件识别）
const getFileType = (file) => {
  const fileName = file.name

  // 优先检查POSCAR文件
  if (isPoscarFile(fileName)) {
    return 'poscar'
  }

  // 检查标准MIME类型
  if (file.type) {
    const mimeType = file.type.split('/')[0]
    if (['image', 'audio', 'video'].includes(mimeType)) {
      return mimeType
    }
  }

  // 如果是文本文件或无MIME类型，可能是POSCAR
  if (file.type === 'text/plain' || file.type === '' || !file.type) {
    // 如果没有扩展名或者是常见的结构文件扩展名，认为是POSCAR
    if (!fileName.includes('.') || isPoscarFile(fileName)) {
      return 'poscar'
    }
  }

  return file.type.split('/')[0] || 'unknown'
}

// 上传POSCAR文件到服务器
const uploadPoscarFiles = async (files) => {
  const formData = new FormData()

  files.forEach((file, index) => {
    formData.append(`file${index}`, file)
  })

  try {
    const response = await fetch('http://172.26.18.157:8005/upload', {
      method: 'POST',
      body: formData,
    })

    if (!response.ok) {
      throw new Error(`上传失败: ${response.status} ${response.statusText}`)
    }

    const result = await response.json()
    console.log('POSCAR文件上传成功:', result)
    return result
  } catch (error) {
    console.error('POSCAR文件上传失败:', error)
    throw error
  }
}

// 修改文件上传处理函数
const handleFileUpload = async (event) => {
  console.log('handleFileUpload called', event)
  console.log('event.target:', event.target)
  console.log('event.target.files:', event.target.files)
  const files = Array.from(event.target.files || [])
  console.log('files:', files)
  if (!files.length) {
    console.log('No files selected')
    return
  }

  // 获取文件类型（支持POSCAR文件识别）
  const fileTypes = files.map(file => getFileType(file))
  const firstFileType = fileTypes[0]
  const hasInconsistentType = fileTypes.some(type => type !== firstFileType)

  if (hasInconsistentType) {
    alert('请选择相同类型的文件（图片、音频、视频或POSCAR）')
    event.target.value = ''
    return
  }

  // 验证所有文件
  for (const file of files) {
    const { valid, error } = await validateFile(file)
    if (!valid) {
      alert(error)
      event.target.value = ''
      selectedFiles.value = []
      return
    }
  }

  // 检查文件总大小
  const totalSize = files.reduce((sum, file) => sum + file.size, 0)
  const limit = FILE_LIMITS[firstFileType]
  const maxFiles = limit.maxFiles || 3
  if (totalSize > limit.maxSize * maxFiles) {
    const fileTypeDesc = firstFileType === 'image' ? '图片' :
                        firstFileType === 'audio' ? '音频' :
                        firstFileType === 'video' ? '视频' :
                        firstFileType === 'poscar' ? 'POSCAR' : '文件'
    alert(`${fileTypeDesc}文件总大小不能超过${(limit.maxSize * maxFiles) / 1024 / 1024}MB`)
    event.target.value = ''
    selectedFiles.value = []
    return
  }

  // 如果是POSCAR文件，立即上传到服务器
  if (firstFileType === 'poscar') {
    try {
      const uploadResult = await uploadPoscarFiles(files)
      alert('POSCAR文件上传成功！')
      console.log('上传结果:', uploadResult)
    } catch (error) {
      alert(`POSCAR文件上传失败: ${error.message}`)
      event.target.value = ''
      selectedFiles.value = []
      return
    }
  }

  selectedFiles.value = files
}

// 修改文件输入提示
const getPlaceholder = () => {
  if (selectedFiles.value.length > 0) {
    const type = getFileType(selectedFiles.value[0])
    const desc = FILE_LIMITS[type].description
    return `已选择 ${selectedFiles.value.length} 个${desc}，可继续输入消息...`
  }
  return '发消息、输入@选择材料模型或/选择POSCAR文件' // 更新提示文字，包含POSCAR文件
}

// 获取会话标题（取最新一条消息的前10个字）
const getChatTitle = (chatId) => {
  const messages = allHistoryMap.value[chatId] || []
  if (messages.length === 0) return '新对话'
  // 优先找最新的用户消息
  let lastUserMsg = [...messages].reverse().find(msg => msg.role === 'user')
  if (!lastUserMsg) lastUserMsg = messages[messages.length - 1] // 没有用户消息就取最后一条
  if (!lastUserMsg || !lastUserMsg.content) return '新对话'
  return lastUserMsg.content.slice(0, 10) + (lastUserMsg.content.length > 10 ? '...' : '')
}

// 修改发送消息函数
const sendMessage = async () => {
  if (isStreaming.value) return
  if (!userInput.value.trim() && !selectedFiles.value.length) return

  // 临时注释登录检查，用于测试
  // if (!isLoggedIn.value) {
  //   console.log('用户未登录，跳转到登录页面')
  //   console.log('当前登录状态:', isLoggedIn.value)
  //   console.log('localStorage token:', localStorage.getItem('token'))
  //   console.log('localStorage username:', localStorage.getItem('username'))
  //   router.push({
  //     path: '/login',
  //     query: { redirect: '/' }
  //   })
  //   return
  // }

  const messageContent = userInput.value.trim()
  const now = Date.now()

  // 只有在智能合成模式下发送消息才标记用户已发送消息，用于显示摄像头
  if (currentFunction.value === '智能合成') {
    hasUserSentMessage.value = true
  }


  // 添加用户消息
  const userMessage = {
    role: 'user',
    content: messageContent,
    timestamp: now
  }
  currentMessages.value.push(userMessage)

  // 清空输入
  userInput.value = ''
  adjustTextareaHeight()
  await scrollToBottom()

  // 添加助手消息占位
  const assistantMessage = {
    role: 'assistant',
    content: '',
    timestamp: Date.now()
  }
  currentMessages.value.push(assistantMessage)
  isStreaming.value = true
  isGenerating.value = true // 设置生成状态

  try {
    // 只传递文本和chatId
    const reader = await chatAPI.sendMessage(messageContent, currentChatId.value || '1', deepThinking.value)
    const decoder = new TextDecoder('utf-8')
    let accumulatedContent = ''

    while (true) {
      const { value, done } = await reader.read()
      if (done) break

      // 将新的数据块解码并追加到累计内容中
      const chunk = decoder.decode(value, { stream: true })

      // 检查数据块中是否包含错误信息
      if (chunk.includes('{"code":500') && chunk.includes('token 无效')) {
        throw new Error('登录过期，请重新登录')
      }

      accumulatedContent += chunk
      await nextTick(() => {
        const updatedMessage = {
          ...assistantMessage,
          content: accumulatedContent
        }
        const lastIndex = currentMessages.value.length - 1
        currentMessages.value.splice(lastIndex, 1, updatedMessage)
      })
      await scrollToBottom()
    }

    // 处理流结束时可能剩余的缓冲数据
    const remaining = decoder.decode();
    if (remaining) {
        // 同样检查剩余数据中的错误信息
        if (remaining.includes('{"code":500') && remaining.includes('token 无效')) {
          throw new Error('登录过期，请重新登录')
        }

        accumulatedContent += remaining;
        const updatedMessage = {
            ...assistantMessage,
            content: accumulatedContent
        };
        const lastIndex = currentMessages.value.length - 1;
        currentMessages.value.splice(lastIndex, 1, updatedMessage);
    }

    // 最终检查完整内容是否包含错误信息
    if (accumulatedContent.includes('{"code":500') && accumulatedContent.includes('token 无效')) {
      throw new Error('登录过期，请重新登录')
    }
  } catch (error) {
    console.error('发送消息失败:', error)

    // 处理不同类型的错误，显示用户友好的消息
    let errorMessage = '抱歉，AI接口请求失败'

    if (error.message) {
      // 检查是否是token相关错误
      if (error.message.includes('token 无效') || error.message.includes('token无效') ||
          error.message.includes('Token无效') || error.message.includes('Token 无效')) {
        errorMessage = '登录过期，请重新登录'
      } else if (error.message.includes('401') || error.message.includes('Unauthorized')) {
        errorMessage = '登录过期，请重新登录'
      } else {
        errorMessage = error.message
      }
    } else if (typeof error === 'string') {
      // 检查字符串形式的错误
      try {
        const errorObj = JSON.parse(error)
        if (errorObj.msg && (errorObj.msg.includes('token 无效') || errorObj.msg.includes('token无效'))) {
          errorMessage = '登录过期，请重新登录'
        } else if (errorObj.code === 500 && errorObj.msg) {
          errorMessage = '登录过期，请重新登录'
        } else {
          errorMessage = '抱歉，AI接口请求失败'
        }
      } catch (parseError) {
        // 如果不是JSON格式，检查是否包含token相关关键词
        if (error.includes('token 无效') || error.includes('token无效')) {
          errorMessage = '登录过期，请重新登录'
        } else {
          errorMessage = '抱歉，AI接口请求失败'
        }
      }
    }

    // 更新数组中的助手消息
    const lastIndex = currentMessages.value.length - 1
    const updatedMessage = {
      ...assistantMessage,
      content: errorMessage
    }
    currentMessages.value.splice(lastIndex, 1, updatedMessage)
  } finally {
    isStreaming.value = false
    isGenerating.value = false // 重置生成状态
    await scrollToBottom()
    // 发送消息后刷新摘要
    chatHistory.value = chatHistory.value.map(chat => ({
      ...chat,
      title: getChatTitle(chat.id)
    }))
  }
}

// 加载所有历史聊天内容
const loadAllHistory = async () => {
  try {
    const res = await getAllHistory(userId.value)
    if (res.code === 200 && res.data && Object.keys(res.data).length > 0) {
      const backendHistory = res.data; // 后端返回的 { chatId: [消息列表] }
      const chatIds = Object.keys(backendHistory); // 获取所有会话 ID

      // 转换后端消息格式并存储到 allHistoryMap
      allHistoryMap.value = {}; // 清空旧数据
      chatIds.forEach(id => {
        const messages = backendHistory[id];
        if (messages && messages.length > 0) {
          // 新建一个数组，依次推入用户和AI消息
          const msgList = [];
          messages.forEach(msg => {
            // 用户消息
            if (msg.userMessage) {
              msgList.push({
                role: 'user',
                content: msg.userMessage,
                timestamp: parseInt(msg.index)
              });
            }
            // AI消息
            if (msg.systemMessage) {
              msgList.push({
                role: 'assistant',
                content: msg.systemMessage,
                timestamp: parseInt(msg.index) + 0.1 // 保证AI消息排在用户消息后
              });
            }
          });
          // 按时间排序
          allHistoryMap.value[id] = msgList.sort((a, b) => a.timestamp - b.timestamp);
        }
      });

      // 构造左侧聊天列表，标题用消息摘要
      chatHistory.value = chatIds.map(id => ({
        id: parseInt(id),
        title: getChatTitle(id),
        functionType: '' // 现有历史记录默认为通用聊天模式
      }));

      // 不再自动加载第一个会话，也不显示欢迎消息
      currentChatId.value = null;
      currentMessages.value = [];
    } else {
      // 如果返回空数据或失败，清空历史和当前会话
      allHistoryMap.value = {};
      chatHistory.value = [];
      currentChatId.value = null;
      currentMessages.value = [];
    }
  } catch (e) {
    console.error('加载聊天历史失败:', e)

    // 检查是否是网络超时或接口不存在的问题
    if (e.code === 'ECONNABORTED' || e.message?.includes('timeout')) {
      console.log('历史记录接口超时，可能后端接口未实现或网络问题')
    } else if (e.response?.status === 404) {
      console.log('历史记录接口不存在，后端可能未实现该接口')
    }

    // 暂时禁用历史记录功能，避免重复请求
    console.log('暂时禁用历史记录功能，使用本地会话管理')
    allHistoryMap.value = {};
    chatHistory.value = [];
    currentChatId.value = null;
    currentMessages.value = [];
  }
}

// 加载某个会话的消息
const loadChat = (chatId) => {
  currentChatId.value = chatId
  const messages = allHistoryMap.value[chatId] || []
  currentMessages.value = messages

  // 查找对应的历史记录项，获取功能类型
  const chatItem = chatHistory.value.find(chat => chat.id === chatId)
  const functionType = chatItem?.functionType || ''



  // 如果加载的是空会话（新对话），根据历史记录中保存的功能类型来设置
  if (messages.length === 0) {
    currentFunction.value = functionType

    // 如果有功能类型且不是专业功能模式，添加初始消息
    if (functionType && !isSpecialFunction(functionType)) {
      const initialPrompt = '您好！今天可以为您做什么？'

      // 添加初始消息到当前消息列表
      currentMessages.value.push({
        role: 'assistant',
        content: initialPrompt
      })
    }
    // 专业功能模式不添加任何初始消息，保持界面简洁
  } else {
    // 如果有消息内容，保持当前功能模式不变（用于有内容的历史会话）
    // 这里可以根据需要调整逻辑

  }

  // 切换历史记录时重置摄像头显示状态
  hasUserSentMessage.value = false

  // 切换会话后刷新摘要
  chatHistory.value = chatHistory.value.map(chat => ({
    ...chat,
    title: getChatTitle(chat.id)
  }))
}

// 新建会话后刷新历史
const startNewChat = async (functionType = '') => {

   console.log(functionType)
  // 这里建议后端也支持新建会话接口，暂用本地生成
  const newId = Math.floor(Math.random() * 2147483647) + 1

  // 重置用户发送消息状态
  hasUserSentMessage.value = false

  // 重置当前功能为默认状态（通用聊天模式）
  currentFunction.value = ''

  let icon = "";

  
  for(let i = 0; i < 10; i++) {
    let item = quickFunctions[i];
    console.log(item.name === functionType)
    if (item.name === functionType) {
      icon = item.icon
     
      break;
    }
  }

  // 新建会话时标题用"新对话"，并保存功能类型
  allHistoryMap.value[newId] = []
  chatHistory.value = [
    { id: newId, title: '新对话', image: icon, functionType: functionType },
    ...chatHistory.value
  ]

  currentChatId.value = newId
  currentMessages.value = []
}

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes < 1024) return bytes + ' B'
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
}

// 移除文件
const removeFile = (index) => {
  selectedFiles.value = selectedFiles.value.filter((_, i) => i !== index)
  if (selectedFiles.value.length === 0) {
    fileInput.value.value = ''  // 清空文件输入
  }
}

// 删除消息
const deleteMessage = (messageToDelete) => {
  const index = currentMessages.value.findIndex(msg =>
    msg.content === messageToDelete.content &&
    msg.timestamp === messageToDelete.timestamp
  )

  if (index !== -1) {
    currentMessages.value.splice(index, 1)

    // 更新历史记录
    if (currentChatId.value) {
      allHistoryMap.value[currentChatId.value] = [...currentMessages.value]
    }
  }
}

// 切换侧边栏收起/展开
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
  // 保存到本地存储，下次打开页面时保持相同状态
  localStorage.setItem('sidebarCollapsed', sidebarCollapsed.value ? 'true' : 'false')
}

// 跳转到登录页面
const goToLogin = () => {
  console.log('goToLogin called')

  // 跳转到登录页面并刷新页面确保正确渲染
  router.push('/login').then(() => {
    console.log('Successfully navigated to login page')
    // 添加短暂延迟后刷新页面，确保登录页面正确渲染
    setTimeout(() => {
      window.location.reload()
    }, 100)
  }).catch((error) => {
    console.error('Navigation error:', error)
  })
}

// 切换用户下拉菜单
const toggleUserDropdown = () => {
  showUserDropdown.value = !showUserDropdown.value
}

// 点击外部关闭下拉菜单
const closeDropdownOnClickOutside = (event) => {
  const dropdown = event.target.closest('.user-dropdown')
  if (!dropdown) {
    showUserDropdown.value = false
  }
}

// 退出登录
const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('username')
  isLoggedIn.value = false
  username.value = ''
  showUserDropdown.value = false // 关闭下拉菜单
}

// 添加一个获取问候语的函数
const getGreeting = () => {
  return '我是MatCreate AI，很高兴见到你！\n我可以帮你设计材料、合成材料、解答问题，请把你的任务交给我吧~'
}

// 创建响应式的问候语
const greeting = computed(() => {
  return getGreeting()
})

onMounted(() => {
  loadAllHistory()
  adjustTextareaHeight()
  checkLoginStatus() // 检查登录状态

  // 恢复侧边栏状态
  const savedState = localStorage.getItem('sidebarCollapsed')
  if (savedState) {
    sidebarCollapsed.value = savedState === 'true'
  }

  // 添加点击外部关闭下拉菜单的事件监听
  document.addEventListener('click', closeDropdownOnClickOutside)

  // 监听storage事件，当localStorage变化时更新登录状态
  window.addEventListener('storage', (e) => {
    if (e.key === 'token' || e.key === 'username') {
      checkLoginStatus()
    }
  })

  // 监听focus事件，当页面重新获得焦点时检查登录状态
  window.addEventListener('focus', checkLoginStatus)
})

onBeforeUnmount(() => {
  // 组件销毁前移除事件监听
  document.removeEventListener('click', closeDropdownOnClickOutside)
  window.removeEventListener('storage', checkLoginStatus)
  window.removeEventListener('focus', checkLoginStatus)
})
</script>

<style scoped lang="scss">
.ai-chat {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-color);
  overflow: hidden;
  z-index: 10; // 确保z-index足够高

  .header {
    display: none; // 隐藏顶部header区域

    .single-login-btn {
      padding: 0.5rem 1.2rem;
      border: none;
      border-radius: 0.5rem;
      background: #1e88e5;
      color: white;
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: 500;
      transition: all 0.2s ease;
      outline: none;

      &:hover {
        background: #1565c0;
      }
    }

    .user-dropdown {
      position: relative;
      cursor: pointer;
      z-index: 1002; // 确保整个下拉菜单容器在顶层

      .user-avatar {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid transparent;
      }

      .dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 0.5rem;
        background: white;
        border-radius: 0.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(0, 0, 0, 0.1);
        min-width: 150px;
        z-index: 1002; // 比header更高的z-index
        overflow: hidden;
        animation: dropdownFadeIn 0.2s ease;

        .dropdown-item {
          display: flex;
          align-items: center;
          gap: 0.8rem;
          padding: 0.8rem 1rem;
          cursor: pointer;
          transition: all 0.2s ease;
          border: none;
          background: transparent;
          width: 100%;
          text-align: left;

          &:hover {
            background: rgba(0, 0, 0, 0.05); // 改为灰色悬停效果
          }

          &.logout-item {
            color: #333; // 改为黑色

            .logout-icon {
              width: 1.2rem;
              height: 1.2rem;
              object-fit: contain;
            }

            span {
              font-size: 0.9rem;
              font-weight: 500;
            }
          }
        }
      }
    }
  }

  // 右上角登录区域
  .top-right-auth {
    position: fixed;
    top: 1rem;
    right: 3rem; // 调整右边距，考虑页面边距
    z-index: 1001; // 确保在最顶层
    display: flex;
    align-items: center;

    .single-login-btn {
      padding: 0.5rem 1.2rem;
      border: none;
      border-radius: 0.5rem;
      background: #1e88e5;
      color: white;
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: 500;
      transition: all 0.2s ease;
      outline: none;

      &:hover {
        background: #1565c0;
      }
    }

    .user-dropdown {
      position: relative;
      cursor: pointer;
      z-index: 1002; // 确保整个下拉菜单容器在顶层

      .user-avatar {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid transparent;
      }

      .dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 0.5rem;
        background: white;
        border-radius: 0.6rem; // 与侧边栏按钮保持一致的圆角
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(0, 0, 0, 0.1);
        width: 15rem; // 与侧边栏按钮保持一致的宽度
        z-index: 1002; // 比header更高的z-index
        overflow: hidden;
        animation: dropdownFadeIn 0.2s ease;

        .dropdown-item {
          display: flex;
          align-items: center;
          justify-content: center; // 让内容在下拉菜单中居中
          gap: 0.8rem; // 与侧边栏按钮图标间距保持一致
          padding: 0.7rem 1rem; // 与侧边栏按钮内边距保持一致
          cursor: pointer;
          transition: all 0.2s ease; // 与侧边栏按钮过渡效果保持一致
          font-size: 0.9rem; // 与侧边栏按钮字体大小保持一致
          font-weight: 500; // 与侧边栏按钮字体粗细保持一致
          min-height: 2.8rem; // 与侧边栏按钮最小高度保持一致
          box-sizing: border-box;

          &:hover {
            background: rgba(0, 0, 0, 0.05); // 与侧边栏按钮悬停效果保持一致
          }

          .logout-icon {
            width: 1.1rem; // 与侧边栏按钮图标大小保持一致
            height: 1.1rem;
            opacity: 0.7;
            flex-shrink: 0; // 防止图标被压缩
            display: flex; // 确保图标内部居中
            align-items: center;
            justify-content: center;
          }

          span {
            color: #333; // 黑色文字
            display: flex; // 确保文字垂直居中
            align-items: center;
          }
        }
      }
    }
  }

  .chat-container {
    flex: 1;
    display: flex;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    gap: 0;
    height: calc(100vh - 64px);
    overflow: hidden;
    padding-left: 280px; // 为固定侧边栏留出空间(280px宽度)
    transition: padding-left 0.3s ease;

    &.sidebar-collapsed {
      padding-left: 0; // 收起状态下完全占满屏幕
    }
  }

  // 展开侧栏按钮样式 - 去掉边框，只保留图片
  .expand-sidebar-btn {
    position: fixed;
    top: 20px; // 距离顶部20px，在左上角位置
    left: 20px; // 距离左侧20px，在左上角位置
    z-index: 1001; // 确保在其他元素之上
    width: 20px; // 调整为图片实际大小
    height: 20px; // 调整为图片实际大小
    // 去掉所有背景、边框和阴影
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;

    &:hover {
      // 悬停时只有轻微的缩放和透明度变化
      transform: scale(1.1);

      .tooltip {
        opacity: 1;
        visibility: visible;
      }
    }

    &:active {
      transform: scale(0.95);
    }

    .expand-icon {
      
      width: 20px;
      height: 20px;
      transition: all 0.2s ease;
    }

    &:hover .expand-icon {
      opacity: 0.8;
    }

    &:active .expand-icon {
      opacity: 0.6;
    }

    // 提示框样式
    .tooltip {
      position: fixed; // 改为fixed定位，避免被父容器裁剪
      left: 40px; // 固定位置，在按钮右侧显示
      top: -5px; // 与按钮同一高度
      background: #333;
      color: white;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 12px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.15s ease, visibility 0.15s ease; // 缩短过渡时间，分别设置
      z-index: 9999; // 提高z-index确保在最顶层
      pointer-events: none; // 防止提示框干扰鼠标事件

      // 添加小三角箭头
      &::before {
        content: '';
        position: absolute;
        left: -4px;
        top: 50%;
        transform: translateY(-50%);
        border: 4px solid transparent;
        border-right-color: #333;
      }
    }
  }
  
  .sidebar {
    width: 280px;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    backdrop-filter: none;
    border-radius: 0;
    box-shadow: none;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    position: fixed;
    left: 0;
    top: 0; // 从页面顶部开始，header已移除
    bottom: 0;
    z-index: 100;
    overflow-y: auto;
    transition: all 0.3s ease;
    
    // 收起状态的样式 - 完全隐藏
    &.collapsed {
      width: 0;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transform: translateX(-100%);
    }
    
  }

  // 添加收起/展开按钮样式 - 移到主内容区域
  .collapse-btn {
    position: fixed;
    top: 50px;
    left: 268px; // 默认位置在侧边栏右侧
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    // 收起状态下的位置
    .chat-container.sidebar-collapsed & {
      left: 12px; // 收起状态下移到左侧
    }

    .icon {
      width: 14px;
      height: 14px;
      color: #666;
      transition: transform 0.3s ease;
    }

    .iconiop {
       width: 15px;
       height: 15px;
       color: #666;
       transition: transform 0.3s ease;
    }

    &:hover {
      background: #f0f0f0;

      .icon {
        color: #333;
      }
    }
  }
    
    .app-logo {
      padding: 1.2rem 1rem;
      margin-bottom: 0.8rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);

      .logo-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 0.5rem;
        min-height: 2.5rem; // 确保有足够的高度
        flex-wrap: nowrap; // 强制不换行
        overflow: hidden; // 隐藏超出部分
      }

      .logo-text {
        font-size: 2rem;
        font-weight: 700;
        color: #000000;
        font-family: 'Times New Roman', Times, serif;
        display: block;
        margin-bottom: 0;
        letter-spacing: -0.5px;
        white-space: nowrap; // 强制文字保持在一行，不换行
        overflow: hidden; // 隐藏超出部分
        text-overflow: ellipsis; // 如果文字太长，显示省略号
        flex-shrink: 0; // 防止文字被压缩
        min-width: 0; // 允许flex项目缩小
      }

      .logo-icon {
        font-size: 1.5rem;
        font-weight: 700;
        color: #000000;
        font-family: 'Times New Roman', Times, serif;
        display: block;
        margin-bottom: 0;
        mix-blend-mode: multiply; // 去除白色背景，让白色部分变透明
        filter: contrast(1.1) brightness(0.95); // 增强对比度，让文字更清晰
        flex-shrink: 0; // 防止logo被压缩
      }
    }

    // 收起侧栏按钮容器样式
    .collapse-sidebar-container {
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: pointer;

      // 收起侧栏按钮样式
      .collapse-sidebar-btn {
        height: 20px;
        width: 20px;
        transition: all 0.2s ease;
        flex-shrink: 0;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;

        &:hover {
          transform: scale(1.1);
          opacity: 0.8;

          // 悬停时显示tooltip
          + .tooltip {
            opacity: 1;
            visibility: visible;
          }
        }

        &:active {
          transform: scale(0.95);
          opacity: 0.6;
        }
      }

      // 黑色提示框样式
      .tooltip {
        position: fixed; // 使用fixed定位，与展开侧栏一致
        left: 290px; // 固定位置，在收起按钮右侧
        top: 15px; // 与按钮同一高度
        background: #000; // 纯黑色背景
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        z-index: 10000;
        pointer-events: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

        // 添加小三角箭头指向按钮
        &::before {
          content: '';
          position: absolute;
          left: -6px;
          top: 50%;
          transform: translateY(-50%);
          border: 6px solid transparent;
          border-right-color: #000;
        }
      }
    }

      .logo-icon {
        display: block;
        font-size: 1.2rem;
        font-weight: 700;
        color: #1e88e5;
        text-align: center;
        margin-bottom: 0.2rem;
        padding: 0.3rem;
        border-radius: 0.4rem;
        background: rgba(30, 136, 229, 0.1);
      }
      
      .new-chat {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.8rem;
        padding: 0.6rem 1rem;
        border-radius: 0.8rem;
        background: rgba(30, 136, 229, 0.08);
        color: #1e88e5;
        border: 1px solid rgba(30, 136, 229, 0.2);
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.9rem;
        width: 240px;
        font-weight: 500;
        // 添加左边距，让按钮往左移一点
        margin-left: -16.5px;

        &:hover {
          background: rgba(30, 136, 229, 0.15);
        }

        .icon {
          width: 1.1rem;
          height: 1.1rem;
          color: currentColor;
        }
      }

      // 新对话按钮样式
      .new-chat-button {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0.7rem 0;
        border-radius: 0.6rem;
        background: rgba(30, 136, 229, 0.1);
        color: #1e88e5;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.9rem;
        font-weight: 500;
        width: 15.5rem;
        margin-bottom: 0.5rem;
        margin-left: -0.8rem;
        box-sizing: border-box;
        min-height: 2.8rem;
        text-align: left;

        &:hover {
          background: rgba(30, 136, 229, 0.15);
          color: #1e88e5;
        }

        .icon {
          color: #1e88e5;
          margin-left: 1rem;
          margin-right: 0.8rem;
          width: 1.1rem;
          height: 1.1rem;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .function-buttons {
      flex-shrink: 0;
      padding: 0 0.8rem 0.8rem;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      
      .function-btn {
        width: 15.5rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0.7rem 0; // 移除左右内边距，使用固定的图标区域
        border-radius: 0.6rem;
        background: transparent;
        color: #333;
        border: none;
        box-shadow: none;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.9rem;
        font-weight: 500;
        text-align: left;
        justify-content: flex-start;
        min-height: 2.8rem; // 确保所有按钮有统一的最小高度
        box-sizing: border-box;
        
        &:hover, &.active {
          background: rgba(0, 0, 0, 0.05);
          color: #1e88e5;
        }
        
        &.active {
          background: rgba(30, 136, 229, 0.1);
        }
        
        &.sub-menu-item {
          padding: 0.7rem 0; // 与主菜单项保持一致的内边距
          font-size: 0.85rem;
          min-height: 2.6rem; // 子菜单项稍微小一点但保持统一

          .icon {
            width: 1.1rem !important;
            height: 1.1rem !important;
            margin-left: 1rem !important; // 与主菜单图标完全对齐
            margin-right: 0.8rem !important; // 与主菜单文字完全对齐
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
          }
        }
        
        .icon {
          width: 1.1rem;
          height: 1.1rem;
          color: #666;
          margin-left: 1rem; // 固定左边距，确保所有图标在同一垂直线上
          margin-right: 0.8rem; // 固定右边距，确保文字对齐
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        // 确保所有图标统一对齐（已在sub-menu-item中定义）

        &:hover .icon,
        &.active .icon {
          color: #1e88e5;
        }
      }
      
      // 分类标题样式
      .menu-category {
        margin-top: 0.5rem;
        cursor: pointer;
        
        .category-title {
          color: #333;
          padding: 0.7rem 1rem;
          display: flex;
          align-items: center;
          font-size: 0.9rem;
          font-weight: 500;
          transition: all 0.2s ease;
          border-radius: 0.6rem;
          
          &:hover {
            background: rgba(0, 0, 0, 0.05);
            color: #1e88e5;
          }
          
          .icon {
            width: 1.1rem;
            height: 1.1rem;
            color: #666;
            margin-right: 0.8rem;
            flex-shrink: 0;
            transition: all 0.2s ease;
          }
          
          &:hover .icon {
            color: #1e88e5;
          }
        }
      }
      
      // 子菜单容器
      .sub-menu {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        padding-top: 0.2rem;
        animation: fadeIn 0.2s ease;
      }
    }
    
    .history-header {
      flex-shrink: 0;
      padding: 1rem 1.5rem 0.75rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.5rem;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      margin-bottom: 0.5rem;
      
      h2 {
        font-size: 0.95rem;
        font-weight: 600;
        color: #666;
        margin: 0;
      }
    }
    
    .history-list {
      flex: 1;
      overflow-y: auto;
      padding: 0 0.8rem 1rem;
      
      .history-item {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.8rem 1rem;
        border-radius: 0.6rem;
        background: transparent;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: 0.2rem;
        
        &:hover {
          background: rgba(0, 0, 0, 0.05);
        }
        
        &.active {
          background: rgba(30, 136, 229, 0.08);
          color: #1e88e5;
          
          .icon {
            color: #1e88e5;
          }
          
          .title {
            color: #1e88e5;
            font-weight: 500;
          }
        }
        
        .icon {
          width: 1.1rem;
          height: 1.1rem;
          color: #888;
          flex-shrink: 0;
        }
        
        .title {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 0.9rem;
          color: #444;
        }
      }
      
      .no-history-message {
        padding: 1rem;
        text-align: center;
        color: #999;
        font-style: italic;
        font-size: 0.9rem;
      }
    }
  

  .chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    backdrop-filter: blur(10px);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    height: 100%;
    margin-left: 0;

    // Split-view模式样式 - 左右分屏布局
    &.split-view {
      flex-direction: row; // 水平布局

      .chat-content {
        width: 50%; // 左侧对话区域占50%
        flex-shrink: 0;
      }

      .video-area {
        width: 50%; // 右侧摄像头区域占50%
        height: 100%;
        background: #f8f9fa;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      // Split-view模式下的输入框调整
      .input-area {
        padding: 0.5rem 2rem 1.5rem !important; // 减少左右边距以适应50%宽度

        .input-row {
          max-width: none !important; // 移除最大宽度限制
        }
      }

      // Split-view模式下的空聊天状态调整
      &.empty-chat .input-area {
        position: relative !important; // 取消固定定位
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
      }
    }

    .chat-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      position: relative; // 添加相对定位
      
      // 当没有消息时应用的样式
      &.empty-chat {
        .messages {
          flex: 0; // 消息区域不占用空间
        }
        
        .input-area {
          position: fixed; // 固定定位，基于整个视口
          top: 50%; // 居中定位
          left: 50%;
          transform: translate(-50%, -50%); // 精确居中
          width: 90%; // 响应式宽度，确保居中
          height: 900px;
          max-width: 1000px; // 最大宽度，与输入框保持一致
          min-width: 320px; // 最小宽度，确保小屏幕可用
          border-radius: 0; // 移除圆角
          box-shadow: none; // 移除阴影
          padding: 1rem; // 响应式内边距
          background: transparent; // 改为透明背景
          z-index: 100; // 确保在顶层
          border: none; // 确保没有边框
          outline: none; // 移除轮廓
          display: flex; // 使用flex布局
          flex-direction: column; // 垂直排列
          justify-content: center; // 垂直居中
          align-items: center; // 水平居中
          box-sizing: border-box; // 确保边距计算正确
          
          // 专业功能标题样式
          .function-title-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 2.5rem;

            .function-title {
              font-size: 2.5rem; // 大标题字体
              font-weight: 700; // 粗体
              color: #333;
              margin: 0;
              text-align: center;
              font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            }
          }

          // 问候语容器样式
          .greeting-container {
            margin-bottom: 2.5rem; // 增加底部间距

            .greeting-content {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 1rem; // logo和文字之间的间距



              // 普通问候语容器
              .normal-greeting {
                display: flex;
                align-items: center;
                justify-content: center;

                .greeting-text-container {
                  display: flex;
                  flex-direction: column;
                  gap: 0.5rem; // 两行文字之间的间距

                  .greeting-line {
                    font-weight: 600; // 增加字体粗细
                    color: #333; // 加深颜色
                    line-height: 1.3; // 调整行高
                    font-family: "PingFang SC", "Microsoft YaHei", sans-serif; // 使用中文友好字体

                    // 第一行 - 大字体，包含logo
                    &:first-child {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      gap: 0.8rem; // logo和文字之间的间距
                      font-size: 1.8rem; // 第一行保持大字体

                      .greeting-logo {
                        width: 3rem; // logo尺寸
                        height: 3rem;
                        flex-shrink: 0; // 防止logo被压缩
                        // 继承原有的logo样式
                        background: #fff;
                        mix-blend-mode: multiply;
                        image-rendering: -webkit-optimize-contrast;
                        image-rendering: crisp-edges;
                        border-radius: 4px;
                        padding: 1px;
                        transition: all 0.2s ease;
                      }
                    }

                    // 第二行 - 小字体
                    &:nth-child(2) {
                      font-size: 1.2rem; // 第二行使用小字体
                      font-weight: 400; // 第二行字体稍细一些
                      color: #666; // 第二行颜色稍浅一些
                      text-align: center; // 第二行居中对齐
                    }
                  }
                }
              }
            }
          }
          
          // 修改输入行的样式，去掉边框
          .input-row {
            border: 1px solid rgba(0, 0, 0, 0.05); // 去掉边框
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); // 减轻阴影效果
            background: white; // 白色背景
            border-radius: 24px; // 更大的圆角
            outline: none; // 移除轮廓
            padding: 0.8rem 1.2rem; // 增加内边距
            width: 100%; // 确保宽度占满
            
            textarea {
              min-height: 100px; // 增加最小高度
              font-size: 1rem; // 增加字体大小
            }
            
            .file-upload .upload-btn {
              width: 2.4rem; // 正方形尺寸
              height: 2.4rem; // 正方形尺寸
              border-radius: 20%; // 圆角正方形
            }
            
            .send-button {
              width: 2.2rem; // 稍微增大发送按钮
              height: 2.2rem;
              border-radius: 50%; // 圆形按钮
            }

            .stop-button {
              width: 2.2rem; // 与发送按钮相同大小
              height: 2.2rem;
              border-radius: 50%; // 圆形按钮
            }
          }
        }
      }
    }
    
    .messages {
      flex: 1;
      overflow-y: auto;
      padding: 4rem 2% 1.5rem !important; // 增加顶部边距，左右留2%边距，延伸到红线位置
      
      // 添加自定义滚动条样式，确保它是可见的
      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.02);
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.15);
        border-radius: 3px;
        
        &:hover {
          background: rgba(0, 0, 0, 0.25);
        }
      }
    }
    
    .input-area {
      flex-shrink: 0;
      padding: 0.5rem 4rem 1.5rem; // 与消息保持一致的左右边距4rem
      background: #fff;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      gap: 1rem;
      border: none;
      outline: none;

      .selected-files {
        background: rgba(0, 0, 0, 0.03);
        border-radius: 0.6rem;
        padding: 0.6rem;
        border: 1px solid rgba(0, 0, 0, 0.06);
        
        .file-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.6rem 0.8rem;
          background: #fff;
          border-radius: 0.5rem;
          margin-bottom: 0.5rem;
          border: 1px solid rgba(0, 0, 0, 0.05);
          transition: all 0.2s ease;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          &:hover {
            background: rgba(30, 136, 229, 0.04);
            border-color: rgba(30, 136, 229, 0.2);
          }
          
          .file-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            
            .icon {
              width: 1.3rem;
              height: 1.3rem;
              color: #1e88e5;
            }
            
            .file-name {
              font-size: 0.875rem;
              color: #333;
              font-weight: 500;
            }
            
            .file-size {
              font-size: 0.75rem;
              color: #666;
              background: rgba(0, 0, 0, 0.05);
              padding: 0.25rem 0.5rem;
              border-radius: 0.8rem;
            }
          }
          
          .remove-btn {
            padding: 0.375rem;
            border: none;
            background: rgba(0, 0, 0, 0.05);
            color: #666;
            cursor: pointer;
            border-radius: 0.375rem;
            transition: all 0.2s ease;
            
            &:hover {
              background: #f44336;
              color: #fff;
            }
            
            .icon {
              width: 1.1rem;
              height: 1.1rem;
            }
          }
        }
      }

      .input-row {
        display: flex;
        gap: 0.8rem;
        width: 85%; // 增加宽度到85%，让输入框更宽
        max-width: 1200px; // 增加最大宽度限制到1200px
        min-width: 400px; // 最小宽度保证
        margin: 0 auto; // 水平居中
        align-items: center; // 修改为居中对齐
        background: #fff; // 纯白背景
        padding: 0.8rem 1.2rem; // 增加内边距使输入框更大
        border-radius: 24px; // 更大的圆角
        border: 1px solid rgba(0, 0, 0, 0.05); // 更淡的边框
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); // 更淡的阴影
        position: relative; // 添加相对定位

        // 添加深度思考按钮样式
        .deep-thinking-btn {
          position: absolute;
          width: auto; // 让内容决定宽度
          height: 2.4rem; // 与上传按钮高度完全一致
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #e0e0e0; // 统一边框样式，与上传按钮一致
          border-radius: 8px; // 与上传按钮圆角保持一致
          background: #ffffff; // 白色背景
          cursor: pointer;
          transition: all 0.2s ease;
          padding: 0 0.8rem; // 调整内边距，减少左右边距确保对齐
          left: 4.2rem; // 调整位置，增加与上传按钮的间距
          bottom: 0.6rem; // 与上传按钮同一水平线，确保视觉对齐
          z-index: 2;
          gap: 0.5rem; // 图标和文字之间的间距
          font-size: 0.9rem; // 添加字体大小，与智能计算按钮一致
          font-weight: 500; // 添加字重，与智能计算按钮一致
          // 统一阴影效果，与其他按钮保持一致
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);

          // 默认状态（未激活）- 与快速功能按钮一致
          &:hover {
            background: #f8f9fa; // 悬停时改为浅灰色，与快速功能按钮一致
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18); // 统一悬停阴影效果
          }

          // 激活状态 - 蓝色
          &.active {
            background: rgba(30, 136, 229, 0.1);
            border: 1px solid rgba(30, 136, 229, 0.2);

            &:hover {
              background: rgba(30, 136, 229, 0.15);
              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18); // 统一悬停阴影效果
            }

            .deep-thinking-text {
              color: #1e88e5;
            }
          }

          .deep-thinking-icon {
            width: 1.1rem; // 调整图标尺寸，稍微小一点
            height: 1.1rem; // 调整图标尺寸，稍微小一点
            object-fit: contain;
            color: currentColor; // 跟随文字颜色
          }
          .deep-thinking-text {
            color: #333; // 文字颜色，继承按钮的字体大小和字重
            user-select: none;
            transition: color 0.2s ease;
          }
        }

        // 智能计算专用下拉菜单样式
        .calculation-dropdown-container {
          position: absolute;
          left: 12rem; // 位置在深度思考按钮右侧
          bottom: 0.6rem; // 与深度思考按钮同一水平线
          z-index: 2;
        }

        .calculation-dropdown-btn {
          height: 2.4rem; // 与深度思考按钮高度一致
          display: flex;
          align-items: center;
          justify-content: space-between;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          background: #ffffff;
          cursor: pointer;
          transition: all 0.2s ease;
          padding: 0 0.8rem;
          gap: 0.5rem;
          font-size: 0.9rem;
          font-weight: 500;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
          min-width: 100px;

          &:hover {
            background: #f8f9fa;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
          }

          .dropdown-text {
            color: #333;
            user-select: none;
            white-space: nowrap;
          }

          .dropdown-arrow {
            width: 14px;
            height: 14px;
            transition: transform 0.2s ease;
            color: #666;

            &.rotated {
              transform: rotate(180deg);
            }
          }
        }

        .calculation-dropdown-menu {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background: white;
          border: 1px solid #e1e5e9;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          z-index: 1000;
          margin-top: 4px;
        }

        .calculation-dropdown-item {
          padding: 0.6rem 0.8rem;
          cursor: pointer;
          transition: background-color 0.2s ease;
          font-size: 0.9rem;
          color: #333;

          &:hover {
            background-color: #f8f9fa;
          }

          &:first-child {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
          }

          &:last-child {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
          }
        }

        .file-upload {
          .hidden {
            display: none;
          }
          
          .upload-btn {
            width: 2.4rem; // 正方形尺寸
            height: 2.4rem; // 正方形尺寸
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e0e0e0; // 浅灰色边框
            border-radius: 8px; // 圆角正方形
            background: #ffffff; // 白色背景
            color: #666; // 图标颜色
            cursor: pointer;
            transition: all 0.2s ease;
            position: absolute; // 绝对定位
            left: 0.8rem; // 左侧位置
            bottom: 0.6rem; // 保持在输入框内部
            padding: 0; // 去掉内边距，让图标居中
            // 统一阴影效果，与其他按钮保持一致
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);

            &:hover:not(:disabled) {
              background: #f8f9fa; // 悬停时改为浅灰色
              border-color: #d0d0d0; // 悬停时边框颜色稍深
              box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18); // 统一悬停阴影效果
            }

            &:disabled {
              opacity: 0.5;
              cursor: not-allowed;
            }

            .upload-icon {
              width: 1.2rem; // 图标尺寸
              height: 1.2rem; // 图标尺寸
              color: currentColor; // 跟随文字颜色
            }
          }
        }

        textarea {
          flex: 1;
          resize: none;
          border: none;
          background: transparent;
          padding: 0.5rem 3rem 0.5rem 1rem; // 减少左侧间距，让文字更靠左
          color: inherit;
          font-family: inherit;
          font-size: 1rem; // 增大字体
          line-height: 1.5;
          max-height: 150px;
          min-height: 100px; // 增加最小高度
          
          &:focus {
            outline: none;
          }
          
          &::placeholder {
            color: #999;
          }
        }
        
        .send-button {
          width: 2.2rem;
          height: 2.2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 50%;
          background: transparent;
          cursor: pointer;
          transition: all 0.2s ease;
          padding: 0;
          position: absolute;
          right: 0.8rem; // 右侧位置
          bottom: 0.6rem; // 与其他按钮同一水平线

          // 有内容时的悬停效果
          &.has-content {
            &:hover:not(:disabled) {
              background: rgba(30, 136, 229, 0.1);
            }
          }

          // 默认状态的悬停效果
          &:hover:not(:disabled):not(.has-content) {
            background: rgba(0, 0, 0, 0.05);
          }

          .send-icon {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: all 0.2s ease;
          }

          &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
          }
        }

        // 停止生成按钮样式
        .stop-button {
          width: 2.2rem;
          height: 2.2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 50%;
          background: #ff4444; // 红色背景表示停止
          cursor: pointer;
          transition: all 0.2s ease;
          padding: 0;
          position: absolute;
          right: 0.8rem; // 与发送按钮相同位置
          bottom: 0.6rem; // 与发送按钮相同位置

          &:hover {
            background: #ff6666; // 悬停时稍微变亮
          }

          .stop-icon {
            width: 1.2rem; // 图标宽度
            height: 1.2rem; // 图标高度
            filter: brightness(0) invert(1); // 将图标变为白色
          }
        }
      }
    }
  }

// 淡入动画
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .ai-chat {
    .chat-container {
      padding: 0;
      padding-left: 0; // 在移动端不需要为侧边栏留空间
    }

    .sidebar {
      display: none; // 在移动端隐藏侧边栏
      // 或者可以考虑做成可滑出的侧边栏，这需要额外的JS逻辑
    }

    // 移动端split-view样式调整
    .chat-main.split-view {
      flex-direction: column-reverse !important; // 移动端垂直布局，摄像头在上方

      .chat-content {
        width: 100% !important; // 移动端对话区域占满宽度
        height: 60%; // 对话区域占60%高度
      }

      .video-area {
        width: 100% !important; // 移动端摄像头区域占满宽度
        height: 40% !important; // 摄像头区域占40%高度
        border-left: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
      }
    }

    // 移动端消息区域样式调整
    .messages {
      padding: 2rem 1% 1.5rem !important; // 移动端减少顶部边距，左右留1%边距
    }

    // 移动端普通输入框样式调整
    .input-area {
      padding: 0.5rem 2rem 1.5rem !important; // 移动端与消息保持一致的左右边距2rem

      .input-row {
        width: 98% !important; // 移动端增加到98%宽度
        min-width: 280px !important; // 最小宽度
        max-width: none !important; // 移除最大宽度限制
      }
    }

    // 移动端问候语样式调整
    .greeting-container {
      .greeting-content {
        .normal-greeting {
          .greeting-text-container {
            .greeting-line {
              // 第一行 - 移动端大字体，包含logo
              &:first-child {
                font-size: 1.4rem !important; // 移动端第一行字体
                gap: 0.6rem !important; // 移动端减少logo和文字间距

                .greeting-logo {
                  width: 2.5rem !important; // 移动端logo尺寸
                  height: 2.5rem !important;
                }
              }

              // 第二行 - 移动端小字体
              &:nth-child(2) {
                font-size: 1rem !important; // 移动端第二行字体，确保比第一行小
              }
            }
          }
        }
      }
    }
    
    .chat-main {
      border-radius: 0;
      

    }
  }
}

.function-quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  align-items: center; // 添加垂直居中对齐
  margin-top: 1rem;

  .quick-func-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem; // 与侧边栏按钮图标间距保持一致
    padding: 0.7rem 1rem; // 与侧边栏按钮内边距保持一致
    min-height: 2.8rem; // 与侧边栏按钮最小高度保持一致
    box-sizing: border-box; // 确保盒模型一致

    border-radius: 0.6rem; // 与侧边栏按钮圆角保持一致
    background: #ffffff; // 改为白色背景
    color: #333; // 将文字颜色改为黑色
    border: 1px solid transparent; // 去掉边框颜色，使用透明边框
    cursor: pointer;
    transition: all 0.2s ease; // 与侧边栏按钮过渡效果保持一致
    font-size: 0.9rem; // 与侧边栏按钮字体大小保持一致
    font-weight: 500; // 与侧边栏按钮字体粗细保持一致
    // 统一阴影效果，与其他按钮保持一致
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);

    &:hover {
      background: #f8f9fa; // 悬停时改为浅灰色
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18); // 统一悬停阴影效果
    }

    .icon {
      width: 1.1rem; // 与侧边栏按钮图标大小保持一致
      height: 1.1rem;
      color: currentColor;
      flex-shrink: 0; // 防止图标被压缩
      display: flex; // 确保图标内部居中
      align-items: center;
      justify-content: center;
    }

    // 统一所有图标大小，不再有特殊处理
    img.icon {
      width: 1.1rem !important; // 与侧边栏按钮图标大小保持一致
      height: 1.1rem !important;
    }
  }
}

// 下拉菜单动画
@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 响应式设计 - 确保输入框在任何分辨率下都完美居中
@media (min-width: 1921px) {
  // 超大屏幕 (4K等)
  .chat-content.empty-chat .input-area {
    width: 70% !important;
    max-width: 1200px !important;
    padding: 2rem !important;
  }
}

@media (max-width: 1920px) and (min-width: 1201px) {
  // 大桌面屏幕
  .chat-content.empty-chat .input-area {
    width: 80% !important;
    max-width: 1000px !important;
    padding: 1.5rem !important;
  }
}

@media (max-width: 1200px) and (min-width: 769px) {
  // 小桌面/大平板
  .chat-content.empty-chat .input-area {
    width: 90% !important;
    max-width: 800px !important;
    padding: 1.2rem !important;
  }
}

@media (max-width: 768px) and (min-width: 481px) {
  // 平板
  .chat-content.empty-chat .input-area {
    width: 95% !important;
    max-width: 600px !important;
    padding: 1rem !important;
    height: auto !important;
    min-height: 400px !important;
  }
}

@media (max-width: 480px) and (min-width: 321px) {
  // 手机
  .messages {
    padding: 1.5rem 1% 1rem !important; // 小屏幕减少顶部边距，左右留1%边距
  }

  // 手机端普通输入框样式
  .input-area {
    padding: 0.5rem 1rem 1rem !important; // 手机端适当增加左右边距

    .input-row {
      width: 99% !important; // 手机端进一步增加宽度
      min-width: 260px !important;
    }
  }

  // 手机端问候语样式调整
  .greeting-container {
    .greeting-content {
      .normal-greeting {
        .greeting-text-container {
          .greeting-line {
            // 第一行 - 手机端大字体，包含logo
            &:first-child {
              font-size: 1.2rem !important; // 手机端第一行字体
              gap: 0.5rem !important; // 手机端进一步减少logo和文字间距

              .greeting-logo {
                width: 2rem !important; // 手机端logo尺寸
                height: 2rem !important;
              }
            }

            // 第二行 - 手机端小字体
            &:nth-child(2) {
              font-size: 0.9rem !important; // 手机端第二行字体，确保比第一行小
            }
          }
        }
      }
    }
  }

  .chat-content.empty-chat .input-area {
    left: 50% !important; // 手机端回到屏幕中心
    width: 98% !important;
    max-width: none !important;
    min-width: 280px !important;
    padding: 0.8rem !important;
  }
}

@media (max-width: 320px) {
  // 超小屏幕
  .messages {
    padding: 1rem 0.5% 0.5rem !important; // 超小屏幕最小顶部边距，左右留0.5%边距
  }

  // 超小屏幕普通输入框样式
  .input-area {
    padding: 0.5rem 0.5rem 0.5rem !important; // 超小屏幕适当增加左右边距

    .input-row {
      width: 100% !important;
      min-width: 240px !important;
    }
  }

  .chat-content.empty-chat .input-area {
    left: 50% !important; // 超小屏幕回到屏幕中心
    width: 100% !important;
    max-width: none !important;
    min-width: 280px !important;
    padding: 0.5rem !important;
  }
}

// 确保所有分辨率下的绝对居中 - 最高优先级
.chat-content.empty-chat .input-area {
  position: fixed !important; // 改为fixed定位，基于整个视口
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 100 !important; // 确保在最顶层
}

/* 大屏幕优化 - 延伸到红线位置 */
@media (min-width: 1400px) {
  .messages {
    padding: 4rem 5% 1.5rem !important; // 大屏幕适当增加边距，延伸到红线
  }
}

/* 超大屏幕优化 - 保持合适比例 */
@media (min-width: 1920px) {
  .messages {
    padding: 4rem 8% 1.5rem !important; // 超大屏幕适度留白，延伸到红线位置
  }
}

</style>